<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>
    
    <div class="card">
        <div class="mycard">
            <p>我的天气</p>

        </div>
        <div class="search">
            <input type="text" placeholder="请输入城市名称" class="search-bar">
            <button onclick="showalert()">搜索</button>
        </div>
        <div class="weatherloading">
            <div class="location">
                <p class="city">广州</p>
            </div>
            <div class="temperature">
                <h1 class="temperature-degree">28°C</h1>
                <div class="weather-description">暴雨</div>
                <div class="winp">风向:东北风</div>
                <div class="humidity">相对湿度：65%</div>
                <div class="wind">风速：15公里/小时</div>
              
               
               
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var btn = document.querySelector('button');
        var txt = document.querySelector('input');

        btn.onclick = function () {


            var val = txt.value;
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'https://restapi.amap.com/v3/weather/weatherInfo?key=3f6a51edf7357fc78b56484202b2a6c4&city=' + val);


            if (val == '') {
                alert('请输入城市名称');
            }



            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    var responseObj = JSON.parse(xhr.responseText);
                    var city = responseObj.lives[0].city;
                    console.log('城市名称：', city);
                    document.querySelector(".city").innerHTML = city;
                    var temperature = responseObj.lives[0].temperature;
                    document.querySelector(".temperature-degree").innerHTML = temperature + '°C';
                    var weather = responseObj.lives[0].weather;
                    document.querySelector(".weather-description").innerHTML = weather;
                     document.querySelector(".winp").innerHTML = '风向：' + responseObj.lives[0].winddirection;
                    var humidity = responseObj.lives[0].humidity;
                    document.querySelector(".humidity").innerHTML = '相对湿度：' + humidity + '%';
                    var windpower = responseObj.lives[0].windpower;
                    document.querySelector(".wind").innerHTML = '风速：' + windpower + '公里/小时';
                          

                
                }
            };
            xhr.send();
        };
    </script>
</body>

</html>